<!DOCTYPE html>
<html>
<meta charset="utf-8">
<style>
    body {
        text-align: center;
    }
    header img {
       height: 100px;
       width: 69%;
       float: right;
       position: relative;
    }
    header nav {
        width: 69%;
        position: absolute;
        right: 30px;
    }
    header .a{
       position: absolute;
       top: 111px;
       right: 300px;
    }
   
    #leftside {
        background-color: gray;
        width: 30%;
        height: 100%;
        float: left;
        position: fixed;
    }

    #article {
        width: 69%;
        float: right;
        overflow-y: hidden;
    }

    main {
        width: 1200px;
        margin: 0 auto;
    }
    button{
        background-color: pink;
    }
    .one{
        position:relative;
        display:inline-block;
    }
    .two {
        display: none;
        position:absolute;
        background-color: pink;
    }
    .one:hover .two{
        display: block;
        background-color: pink;
    }
    footer {
        clear: both;
        width: 1200px;
        margin: 0 auto;
    }
</style>
    <header>
        <div><img src=https://tse4-mm.cn.bing.net/th/id/OIP-C.ZcjidB6ytMyNAjg9clT4PAHaNK?pid=ImgDet&rs=1"></div>
        <nav>
            <a href="https://www.baidu.com">百度</a>
            <a href="https//www.bilibili.com">哔哩哔哩</a>
        </nav>
        <div class="a">
            <button >首页</button>
        <div class="one"> 
            <button >课程</button>
            <div class="two">
            <a href="#">web</a>
            <a href="#">c语言</a>
            </div>
          </div>
        </div>
    </header>
    <body>
    <main>
        <div id="leftside">
            <h1>侧栏</h1>
            <ul>
                <li>第一页</li>
                <li>第二页</li>
                <li>第三页</li>
            </ul>
        </div>
        <div id="article">
           <h>  </h>
           <h>  </h>
           <p>
        </p>
        <p>
        </p>
        <p>你的心有一道墙，而我发现一扇窗。
        </p>
        <p>童话说雨后会有一道彩虹。
        </p>
        <p>啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啊啦
        </p>
        <p>This is a aside.This is a aside.This is a aside.This is a aside.This is a aside.This is a aside.This is a aside.
            This is a aside.This is a aside.This is a aside.This is a aside.This is a aside.This is a aside.This is a aside.
            This is a aside.This is a aside.This is a aside.This is a aside.This is a aside.This is a aside.This is a aside.
            This is a aside.This is a aside.This is a aside.This is a aside.This is a aside.
            This is a aside.This is a aside.This is a aside.This is a aside.This is a aside.This is a aside.
            This is a aside.This is a aside.This is a aside.This is a aside.This is a aside.This is a aside.This is a aside.
            This is a aside.This is a aside.This is a aside.This is a aside.This is a aside.This is a aside.
            This is a aside.This is a aside.This is a aside.This is a aside.
            This is a aside.This is a aside.This is a aside.This is a aside.This is a aside.This is a aside.
            This is a aside.This is a aside.This is a aside.This is a aside.This is a aside.This is a aside.
            This is a aside.This is a aside.This is a aside.This is a aside.This is a aside.This is a aside.
            This is a aside.This is a aside.This is a aside.This is a aside.This is a aside.This is a aside.
            This is a aside.
            This is a aside.
        </p>
        </div>
    </main>
</body>
<footer>
    版权所有|联系方式
</footer>

</html>